<template>
	<view class="material">
		<view class="top">
			<view class="top-item" :class="{'select': materialType == 1 }" @click="selectType(1)">爆款素材</view>
			<view class="top-item" :class="{'select': materialType == 2 }"  @click="selectType(2)">营销素材</view>
		</view>
		<view class="block" v-for="(item,i) in materialList" :key="i">
			<view class="title">
				<view class="title-l">
					<image :src="item.headImage" mode=""></image>
				</view>
				<view class="title-r">
					<text>{{item.username}}</text>
					<text>{{item.materialTitle}}</text>
				</view>
			</view>
			<view class="cont">
				<view class="text">
					{{item.materialDesc}}
				</view>
				<view class="img">
					<image :src="item1.pictureUrl" mode="" v-for="(item1, i1) in item.mMaterialPictureList" :key="i1" ></image>
				</view>
				<view class="url">
					<view class="url-l">
						<image :src="item.mCommodityBase?item.mCommodityBase.commodityPicture:''" mode=""></image>
					</view>
					<view class="url-r">
						<view class="txt1">{{item.mCommodityBase?item.mCommodityBase.commodityName:''}}</view>
						<view class="txt2">
							<text>¥{{item.mCommodityBase?item.mCommodityBase.marketPrice:'0'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="button">
				<button>一键发圈</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	export default {
		data() {
			return {
				materialType: 1,
				materialList:[],
			};
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData(){
				Api.fetchPost('/fsbus/M2214',{materialType: this.materialType}).then(res=>{
					if(res.errorNo == 0){
						this.materialList = res.results.mMaterialList.list;
					}
				}).catch(err=>{})
			},
			selectType(type){
				this.materialType = type;
				this.initData();
			}
		}
	}
</script>

<style>
.material {
	width: 100%;
	min-height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
}
.top {
	width: 100%;
	height: 120upx;
	background-color: #fff;
	display: flex;
	font-size: 30upx;
}
.top-item {
	flex:1;
	text-align: center;
	line-height: 120upx;
}
.top-item.select {
	color: #F52A4C;
}
.block {
	margin-top: 20upx;
	background-color: #fff;
	padding: 20upx 30upx;
}
.block .title {
	height: 130upx;
	display: flex;
}
.block .title  .title-l {
	width: 88upx;
	margin-right: 20upx;
}
.block .title  .title-l  image {
	width: 88upx;
	height: 88upx;
	background-color: #848484;
	border-radius: 100%;
}
.block .title  .title-r {
	flex: 1;
}
.block .title  .title-r text {
	display: block;
	line-height: 44upx;
	font-size: 30upx;
}
.block .title  .title-r text:last-child {
	font-size: 24upx;
	color: #666;
}
.cont {
	padding-left: 108upx;
}
.cont .text {
	margin-bottom: 20upx;
}
.cont .img {
	line-height: 0;
}
.cont .img image {
	width: 150upx;
	height: 150upx;
	background-color: #A2A2A2;
	margin-right: 10upx;
	margin-bottom: 10upx;
	display: inline-block;
}
.cont .url {
	width: 100%;
	height: 140upx;
	background-color: #E6E6E6;
	margin-top: 30upx;
	padding: 15upx;
	display: flex;
}
.cont .url-l {
	width: 110upx;
	margin-right: 20upx;
}
.cont .url-l image {
	width: 110upx;
	height: 110upx;
	background-color: #fff;
}
.cont .url-r {
	flex: 1;
}
.cont .url-r .txt2 {
	margin-top: 20upx;
}
.cont .url-r .txt2 text:first-child {
	font-size: 24upx;
	color: #333333;
}

.button {
	margin: 30upx 0;
	overflow: hidden;
}
.button button {
	width: 320upx;
	height: 64upx;
	line-height: 64upx;
	border-radius: 8upx;
	background-color: #4C4C4C;
	color: #fff;
	font-size: 26upx;
	float: right;
}
</style>
